<template>
  <KView class="sys-image flex-central" :style="imgStyle">
    <KView class="sys-image-div" :class="['img-mode-'+mode,'img-imgMode-'+imgMode]" :style="imgStyle">
      <img v-if="!isMiniprogram" :src="src">
      <img v-else :src="src" :mode="imgMode">
    </KView>
  </KView>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';

  import storeMixins from 'mixins/storeMixins';

  export default {
    mixins:[storeMixins],

    props: {
      src: {
        type: String,
        required: true
      },
      mode: {
        type: String,
        default: 'aspectFit'
      },
      radius: {
        type: Number,
        default: 0
      }
    },

    computed: {
      imgStyle() {
        let radius = this.radius;
        if (radius === 0) {
          return {};
        }
        radius = radius * 750 / this.width;
        return {
          borderRadius: SystemUtil.formatPx(radius)
        };
      }
    },

    data() {
      return {
        isMiniprogram: process.env.isMiniprogram,
        imgMode: ''
      };
    },

    created() {
      if (!this.isMiniprogram) {
        return;
      }

      if (this.mode === 'auto') {
        this.imgMode = 'widthFix';
        // wx.getImageInfo({
        //   src: this.src,
        //   success: res => {
        //     let width = res.width;
        //     let height = res.height;
        //     if (width > height) {
        //       this.imgMode = 'widthFix';
        //     } else {
        //       this.imgMode = 'heightFix';
        //     }
        //   }
        // });
      } else {
        this.imgMode = 'aspectFit';
      }
    }
  };

</script>

<style lang="scss">
  .sys-image {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;

    .sys-image-div {
      overflow: hidden;

      &.img-mode-aspectFit {
        width: 100%;
        height: 100%;

        >img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: scale-down;
        }
      }

      @if $isMini {
        &.img-mode-auto {
          &.img-imgMode-widthFix {
            width: 100%;

            >img {
              display: block;
              width: 100%;
            }
          }

          &.img-imgMode-heightFix {
            height: 100%;

            >img {
              display: block;
              height: 100%;
            }
          }
        }
      }

      @else {
        &.img-mode-auto {
          @extend .center-middle;
          max-height: 100%;
          max-width: 100%;
        }
      }
    }
  }

</style>
